(function (window){
    // 封装切换功能优化
    function Tab(options){
        // 获得所有按钮
        this.btns = document.querySelectorAll(options.btns);
        // 获得所有的DIV
        this.divs = document.querySelectorAll(options.divs);
        // 选中按钮的样式
        this.btnClassName = options.btnClassName || "current";
        // display的值
        this.displayV = options.displayV || "block";
        // 获得所选中的下标
        this.activeIndex = 0;
        this.init();// 初始化
    }
    Tab.prototype.init = function(){
        // forEach当中第二个参数this的作用：将forEach回调函数当中的this指向为Tab实例对象
        this.btns.forEach(function (item,index){
            // bind(this)的作用：单击事件的处理函数中的this指向到Tab实例对象
            item.onclick = function(){
                this.hide();
                // 将当前点击按钮的下标作为activeIndex的值
                this.activeIndex = index;
                this.show();
            }.bind(this);
            this.divs[index].style.display = "none";
        },this)
        this.show();
    }
    // 1- 为按钮下标为activeIndex去除背景颜色  2- 隐藏下标为activeIndex的DIV
    Tab.prototype.hide = function(){
        // 将之前选中的按钮的背景颜色移除掉
        this.btns[this.activeIndex].className = null;
        // 将之前选中的DIV隐藏
        this.divs[this.activeIndex].style.display = "none";
    }
    // 1- 为按钮下标为activeIndex增加背景颜色  2- 显示下标为activeIndex的DIV
    Tab.prototype.show = function(){
        this.btns[this.activeIndex].className = this.btnClassName;
        this.divs[this.activeIndex].style.display = this.displayV;
    }



    // 封装切换功能未优化
    // function Tab(){
    //     // 获得所有按钮
    //     this.btns = document.querySelectorAll("#shopTab .tab-main li");
    //     // 获得所有的DIV
    //     this.divs = document.querySelectorAll("#shopTab .tab-con > div");
    //     // 获得所选中的下标
    //     this.activeIndex = 0;
    //     this.init();// 初始化
    // }
    // Tab.prototype.init = function(){
    //     // forEach当中第二个参数this的作用：将forEach回调函数当中的this指向为Tab实例对象
    //     this.btns.forEach(function (item,index){
    //         // bind(this)的作用：单击事件的处理函数中的this指向到Tab实例对象
    //         item.onclick = function(){
    //             // 将之前选中的按钮的背景颜色移除掉
    //             this.btns[this.activeIndex].className = null;
    //             // 将之前选中的DIV隐藏
    //             this.divs[this.activeIndex].style.display = "none";
    //             // 将当前点击按钮的下标作为activeIndex的值
    //             this.activeIndex = index;
    //             // 为当前点击的按钮增加样式
    //             this.btns[this.activeIndex].className = "current";
    //             // 将当前选中的DIV显示
    //             this.divs[this.activeIndex].style.display = "block";
    //         }.bind(this);
    //         this.divs[index].style.display = "none";
    //     },this)
    //     this.btns[this.activeIndex].className = "current";
    //     this.divs[this.activeIndex].style.display = "block";
    // }
    window.Tab = Tab;// 将构造函数设置全局的
})(window);